<template>
  <el-form
    ref="formRef"
    :model="formData"
    label-width="120px"
    class="settings-form"
  >
    <!-- 是否上线产品 -->
    <el-form-item label="是否上线产品" prop="isOnline">
      <el-radio-group v-model="formData.isOnline">
        <el-radio :label="true">是</el-radio>
        <el-radio :label="false">否</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 服务提供商选择 -->
    <el-form-item label="服务商选择" v-if="formData.serviceProviders.length">
      <el-checkbox-group v-model="formData.selectedProviders">
        <el-checkbox
          v-for="provider in formData.serviceProviders"
          :key="provider"
          :label="provider"
          >{{ provider }}</el-checkbox
        >
      </el-checkbox-group>
    </el-form-item>

    <!-- 外事服务提供商选择 -->
    <el-form-item
      label="外事服务商选择"
      v-if="formData.foreignServiceProviders.length"
    >
      <el-checkbox-group v-model="formData.selectedForeignProviders">
        <el-checkbox
          v-for="provider in formData.foreignServiceProviders"
          :key="provider"
          :label="provider"
          >{{ provider }}</el-checkbox
        >
      </el-checkbox-group>
    </el-form-item>

    <!-- 审批方式 -->
    <el-form-item label="审批方式" prop="approvalType">
      <el-radio-group v-model="formData.approvalType">
        <el-radio label="pre">行前审批</el-radio>
        <el-radio label="post">行后审批</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="方式" prop="happyType" v-if="formData.happyType">
      <el-radio-group v-model="formData.happyType">
        <el-radio label="singing">唱歌</el-radio>
        <el-radio label="dancing">跳舞</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  onMounted,
  defineProps,
  defineExpose,
} from "vue";

// 接收父组件参数
const props = defineProps({
  productType: {
    type: String,
    required: true,
    validator: (v) => ["flight", "hotel", "train", "car"].includes(v),
  },
  isEdit: { type: Boolean, default: false },
  productConfig: {
    type: Object,
    required: true,
    default: () => ({ serviceProviders: [], foreignServiceProviders: [] }),
  },
});

// 表单核心数据与引用
const formRef = ref(null);
const formData = reactive({
  isOnline: null,
  serviceProviders: [],
  selectedProviders: [],
  foreignServiceProviders: [],
  selectedForeignProviders: [],
  approvalType: "",
  happyType: "",
});

// 初始化表单数据（合并逻辑）
const initFormData = () => {
  // 加载基础配置
  formData.serviceProviders = [...(props.productConfig.serviceProviders || [])];
  formData.foreignServiceProviders = [
    ...(props.productConfig.foreignServiceProviders || []),
  ];

  // 编辑模式加载默认值，否则重置
  const config = props.isEdit ? props.productConfig : {};
  formData.isOnline = config.isOnline ?? null;
  formData.selectedProviders = [...(config.selectedProviders || [])];
  formData.selectedForeignProviders = [
    ...(config.selectedForeignProviders || []),
  ];
  formData.approvalType = config.approvalType ?? "";
  formData.happyType = config.happyType ?? "";
};

// 保存逻辑（简化验证）
const emits = defineEmits(["save"]);
const handleSave = () => {
  const submitData = {
    productType: props.productType,
    ...JSON.parse(JSON.stringify(formData)),
  };
  emits("save", submitData);
  return submitData;
};

// 监听与初始化（合并监听项）
watch([() => props.isEdit, () => props.productConfig], initFormData, {
  deep: true,
});
onMounted(initFormData);

// 暴露必要方法
defineExpose({ formRef, formData, handleSave });
</script>

<style scoped>
.settings-form {
  margin-top: 20px;
}
.el-form-item {
  margin-bottom: 18px;
}
.el-checkbox {
  margin-right: 15px;
  margin-bottom: 10px;
}
</style>
